<template>
  <div>
    <h2>电影列表</h2>
    <ul>
      <li v-for="item in list">
        <!-- <RouterLink :to="`/film/${item.filmId}`">
          <p>名称：{{ item.name }}</p>
          <p>ID: {{ item.filmId }}</p>
        </RouterLink> -->

        <RouterLink
          :to="{
            name: 'film',
            params: {
              filmId: item.filmId,
            },
          }"
        >
          <p>名称：{{ item.name }}</p>
          <p>ID: {{ item.filmId }}</p>
        </RouterLink>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      list: [],
    };
  },

  methods: {
    // 获取数据
    fetchData() {
      axios
        .get("https://m.maizuo.com/gateway", {
          params: {
            cityId: 440300, // 城市Id
            pageNum: 1, // 当前页码
            pageSize: 10, // 每页显示条数
            type: 1, // 电影类型， 1 - 正在热映 2 - 即将上映
            k: 7610884, // 随机数
          },
          headers: {
            "X-Host": "mall.film-ticket.film.list",
          },
        })
        .then(({ data }) => {
          console.log("data", data);
          // 判断业务状态码
          if (data.status !== 0) {
            alert(data.msg);
            return;
          }

          // data.data.films => this.list
          this.list = data.data.films;
        })
        .catch((error) => {
          console.log("error", error);
        });
    },
  },

  mounted() {
    this.fetchData();
  },
};
</script>
